<script setup>
import { ref } from 'vue'
const clipped = ref(false);
const drawer = ref(false);
const order = ref(0);
const title = ref("娱乐模式")
const count = ref('100');
const num = ref('99+');
const numCount = () => {
    count.value = count.value - 1;
    if (count.value > 99) {
        num.value = '99+'
    } else {
        console.log('12');
        num.value = count.value;
    }
    console.log(count.value);
}
const items = ref([
    {
        icon: 'mdi-apps',
        title: '欢迎光临',
        to: '/'
    },
    {
        icon: 'mdi-chart-bubble',
        title: 'Detail',
        to: '/detail'
    }
])
const pattern = () => {
    if (order.value == 0) {
        order.value = -1;
        title.value = '学习模式';
    } else {
        order.value = 0;
        title.value = '娱乐模式';
    }
}
</script>
<template>
    <v-app>
        <v-navigation-drawer v-model="drawer" :clipped="clipped" app>
            <v-list nav>
                <v-list-item>
                    <v-avatar color="primary" size="small">
                        c
                    </v-avatar>
                    csw
                </v-list-item>

                <v-list-item v-for="(item, i) in items" :key="i" :to="item.to" router exact>
                    <v-list-item-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title v-text="item.title" />
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app-bar :collapse="clipped" color="red" :order="order" app>
            <slot name="header"></slot>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
            <v-btn icon @click.stop="clipped = !clipped">
                <v-icon>mdi-application</v-icon>
            </v-btn>
            <label class="swap text-4xl">
                <input type="checkbox" />
                <div @click.stop="pattern()" v-if="order == 0">😈</div>
                <div @click.stop="pattern()" v-else-if="order == -1">😇</div>
            </label>
            <h1>{{ title }}</h1>
            <v-spacer />
            <div class="indicator">
                <span class="indicator-item badge badge-secondary">{{ num }}</span>
                <button class="btn" @click="numCount()">hello</button>
            </div>
        </v-app-bar>

        <v-main>
            <v-container fluid>
                <slot></slot>
            </v-container>
        </v-main>

        <footer class="footer footer-center p-4 bg-base-300 text-base-content">
            <div>
                <p>Copyright © 2022 - All right reserved by ACME Industries Ltd</p>
            </div>
        </footer>
    </v-app>
</template>
<style lang="sass" scoped>

</style>